<template>
  <div class="video-live">
    <video ref="videoPlayer" class="video-js vjs-default-skin" autoplay muted loop>
    </video>
  </div>
</template>

<script>
  import { api } from '/@/api/easyLive/index.js';
  import videojs from 'video.js';
  import 'video.js/dist/video-js.css';
  import flvjs from 'flv.js';

  let interval = null;

  export default {
    props: {
      currentCameraId: {
        type: String,
        default: '',
      },
      videoUrl: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        playState: false,
        flvPlayer: null,
      };
    },
    methods: {
      startPlay() {
        const videoElement = this.$refs.videoPlayer; // 获取视频 DOM 元素

        console.log('videoUrl: ', this.videoUrl);

        // 确保 flv.js 支持并且传入正确的 DOM 元素
        if (flvjs.isSupported()) {
          this.flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: this.videoUrl,
          });
          this.flvPlayer.attachMediaElement(videoElement);
          this.flvPlayer.load();
          this.flvPlayer.play(); // 自动播放
        } else {
          console.error('FLV.js is not supported in this browser');
        }

        // 使用 video.js 进行播放器初始化
        this.player = videojs(videoElement, {
          controls: true,
          autoplay: true, // 设置自动播放
          preload: 'auto',
        });
      },
      playVideo() {
        api.startLive(this.currentCameraId).then(() => {
          if (!this.playState) {
            this.startPlay();
          }
          this.playState = true;
        });
      },
      refreshVideo() {
        // 重新加载 FLV 流，而不是销毁播放器
        if (this.flvPlayer) {
          // 停止并销毁当前播放器
          this.flvPlayer.unload(); // 停止当前流
          this.flvPlayer.detachMediaElement(); // 分离视频元素
          this.flvPlayer.destroy(); // 销毁播放器
          this.flvPlayer = null; // 清空播放器引用
        }
      },
      preventFullscreen(e) {
        // 阻止双击进入全屏
        e.preventDefault();
      },
      handleFullscreenChange() {
        const videoElement = this.$refs.videoPlayer;

        // 如果进入了全屏状态，强制退出全屏
        if (document.fullscreenElement === videoElement || document.webkitFullscreenElement === videoElement) {
          document.exitFullscreen();
        }
      },
      disableFullscreenButton() {
        const videoElement = this.$refs.videoPlayer;
        const fullscreenButton = videoElement.querySelector('.vjs-fullscreen-control');
        if (fullscreenButton) {
          fullscreenButton.style.display = 'none'; // 隐藏全屏按钮
        }
      },
    },
    watch: {
      currentCameraId() {
        this.playState = false;
        this.refreshVideo();
        this.playVideo();
        if (interval) {
          clearInterval(interval);
        }
        interval = setInterval(() => {
          this.playVideo();
        }, 15 * 1000);
      },
    },
    mounted() {
      // 禁止双击进入全屏
      const videoElement = this.$refs.videoPlayer;
      videoElement.addEventListener('dblclick', this.preventFullscreen);

      // 监听全屏变化，强制退出全屏
      document.addEventListener('fullscreenchange', this.handleFullscreenChange);
      document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);

      // 禁用全屏按钮
      this.disableFullscreenButton();
    },
    beforeUnmount() {
      if (this.player) {
        this.player.dispose(); // 销毁播放器实例
      }
      // 移除事件监听
      const videoElement = this.$refs.videoPlayer;
      videoElement.removeEventListener('dblclick', this.preventFullscreen);
      document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
      document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
    },
  };
</script>

<style scoped lang="less">
  .video-live {
    width: 100%;
    height: 100%;
    .video-js {
      width: 100%;
      height: 100%;
    }
  }
</style>
